<template>
  <transition name='slide'>
    <music-list :title="title"
                :bgImage="bgImage"
                :songs="songs"></music-list>
  </transition>
</template>


<script>
import MusicList from 'components/music-list/music-list'
import { mapGetters } from 'vuex'
import { createSong } from 'common/js/Wysong'


export default {
  name: 'disc',
  data () {
    return {
      id: this.$route.params.id,
      songs: [],
      a: ''
    }
  },
  computed: {
    title () {
      return this.disc.name
    },
    bgImage () {
      return this.disc.coverImgUrl
    },
    ...mapGetters([
      'disc'
    ]),
  },
  components: {
    MusicList
  },
  methods: {
    _getSongList () {
      // 可以操作需要多少条song在config，我这边不做配置了。有空再说
      this.$api.music.getPlayListDetail(this.id)
        .then(res => {
          var ret = []
          res.playlist.tracks.forEach((element, index) => {
            let musicData = element
            ret.push(createSong(musicData))
            if (musicData.id) {
              this.$api.music.checkMusic(musicData.id).then(checkMusicRes => {
                if (checkMusicRes.success) {
                  this.$api.music.getSongUrl(musicData.id).then(urlRes => {
                    ret[index].url = urlRes.data[0].url;
                  })
                }
              })
            }
          });
          // 就是这个10,可以提出来的。
          ret = ret.slice(0, 10)
          this.songs = ret
        })
    },
    _haveID () {
      if (!this.bgImage) {
        this.$router.push('/recommend')
        console.log('true');
        return
      }
    }
  },
  created () {
    this._haveID()
    this._getSongList()
  },
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.slide-enter-active, .slide-leave-active
  transition all 0.3s
.slide-enter, .slide-leave-to
  transform translate3d(100%, 0, 0)
</style>